<template>
    <div class="app-container">
        <div class="edit-box">
            <div class="form-box">
                <div class="form-group">
                    <div class="form-label">文章标题</div>
                    <div class="form-input">
                        <el-input v-model="editedNews.title" placeholder="请输入文章标题"></el-input>
                    </div>
                </div>

                <div class="form-group">
                    <div class="form-label">文章作者</div>
                    <div class="form-input">
                        <el-input v-model="editedNews.author" placeholder="请输入文章作者"></el-input>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-col">
                        <div class="form-group">
                            <div class="form-label">文章模块</div>
                            <div class="form-input">
                                <el-select v-model="editedNews.moduleId" placeholder="please select your zone" style="width: 100%;">
                                    <el-option v-for="(v,k) in newsModulesMap" :label="v" :value="k" :key="k"></el-option>
                                </el-select>
                            </div>
                        </div>
                    </div>
                    <div class="form-col">
                        <div class="form-group">
                            <div class="form-label">发布日期</div>
                            <div class="form-input">
                                <el-date-picker type="date" placeholder="Pick a date" v-model="editedNews.postDate" style="width: 100%;"></el-date-picker>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="editor-box">
                    <editor :value="editedNews.content" @input="(content)=> editedNews.content = content" :setting="editorSetting"></editor>
                </div>
                <div class="btn-group">
                    <el-button   @click="back()">返回</el-button>
                    <el-button  type="primary" @click="edit()">编辑</el-button>
                </div>

            </div>
        </div>
    </div>

</template>

<script>
    import editor from '@/components/Editor/index'
    import newsApi from '@/api/news'
    import newsModuleApi from '@/api/newsModule'
    import '@/styles/form-box.css'

    export default {
        name: "news-edit",
        props:['newsId'],
        data:function () {
            return {
                newsModulesMap:{},
                editedNews:{
                    content:'',
                    moduleId:0
                },
                editorSetting:{
                    height:250
                }
            }
        },
        methods:{
            edit:function () {
                const _this = this;
                newsApi.edit(this.editedNews).then(function (data) {
                    _this.$message({type:'success',message:'编辑成功'})
                }).catch(function () {
                    _this.$message({type:'error',message:'编辑失败'})
                })
            },
            back:function () {
                const _this = this;
                _this.$router.back(-1)
            }
        },
        mounted:function () {
            const _this = this;
            _this.newsModulesMap['0'] = '草稿箱'
            newsModuleApi.findAll().then(function (data) {
                var newsModules = data;
                newsModules.forEach(function (m) {
                    _this.newsModulesMap[m.id] = m.name
                })

                //获取news
                newsApi.findById(_this.newsId).then(function (news) {
                    news.moduleId = news.moduleId + '';
                    _this.editedNews = news;
                }).catch(function () {
                    _this.$message({type:'error',message:'加载id:'+_this.newsId+' 失败'})
                })
            }).catch(function () {
                console.log(e)
                _this.$message({type:'error',message:'加载模块信息错误！'})
            })


        },
        components: {
            'editor': editor
        }
    }
</script>

<style scoped>

</style>
